<script setup lang="tsx">
import { ref, onMounted, watch,computed } from 'vue'
import { useBar } from '@/hooks/chart'
import { graphic as _graphic } from 'echarts'
import { HttpCodeEnum } from '@packages/share/enums'
import { getServiceBarChartAPI } from '@/api/asset/index'
import { assignObject } from '@/utils/object'

// 选择条件
const props = defineProps({
  select: {
    type: Object,
    required: true,
    default: () => {}
  },
  province:{
    type:String,
    default:''
  }
})
const { options } = useBar()
const chartRef = ref()
const all = computed(() => {
  return false
  // return!(props.select.creatBeginTime || props.select.createEndTime || props.select.topic || props.province);
});
const init = () => {
  chartRef.value.loadingChart(true)
  chartRef.value.initChart()

  getInfo(false)
}
// 显示样式
const BarStyle = {
      itemStyle: {
        color: new _graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#fccb05' },
          { offset: 0.5, color: '#f5804d' },
          { offset: 1, color: '#f5804d' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new _graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f5804d' },
            { offset: 0.7, color: '#f5804d' },
            { offset: 1, color: '#fccb05' }
          ])
        }
      }
    }
// 参数合并
const _parameter = () => {
  console.log(all.value);
  return { ...props.select,province:props.province,all:all.value }
}
const getInfo = (flag: boolean) => {
  getServiceBarChartAPI(_parameter()).then((res) => {
    let { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      options.xAxis.data = data.x
      options.series[0].data = data.y
      assignObject(options.series[0],BarStyle)
      // flag?更新|初始化
      flag ? chartRef.value.updateChart() : chartRef.value.initChart()
    }
  })
}
// 侦听顶部选择变化
watch(props, () => {
  getInfo(true)
})
onMounted(() => {
  init()
})
</script>
<template>
  <div class="chart-content">
    <jmp-chart ref="chartRef" v-model:option="options"></jmp-chart>
  </div>
</template>
<style lang="scss" scoped></style>
